<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/view/common/header-talent.jsp" %>
	<center>
		<h1>个人资料</h1>
	</center>
	<hr>

	<form
		action="<%=request.getContextPath()%>/TalentServlet?command=update"
		method="post" onsubmit="return validate();">
		<div class="form-group">
			<input type="text" class="form-control" id="code" name="code"
				placeholder="帐号..." autofocus="autofocus" disabled="disabled"
				value="${sessionScope.talent.code }"> <span id="codeInfo"></span>
		</div>
		<div class="form-group">
			<input type="text" class="form-control" id="name" name="name"
				placeholder="姓名..." value="${sessionScope.talent.name }"> <span
				id="nameInfo"></span>
		</div>
		<div class="form-group">
			<input type="text" class="form-control" id="phone" name="phone"
				placeholder="电话..." value="${sessionScope.talent.phone }"> <span
				id="phoneInfo"></span>
		</div>
		<div class="form-group">
			<input type="text" class="form-control" id="email" name="email"
				placeholder="邮箱..." value="${sessionScope.talent.email }"> <span
				id="emailInfo"></span>
		</div>
		<div class="form-group">
			<select class="form-control" id="age" name="age">
				<option value="">-请选择年龄-</option>
				<script>
					for (var i = 16; i <= 65; i++) {
						// 如果要在JS代码上写EL，这个JS代码就必须要写在JSP页面上并且EL还得使用引号，不能使用外部引入！
						var age = '${sessionScope.talent.age }';
						if (i == age) {
							document.write('<option selected="selected">' + i
									+ '</option>');
						} else {
							document.write('<option>' + i + '</option>');
						}
					}
				</script>
			</select> <span id="ageInfo"></span>
		</div>
		<div class="radio">
			<c:if test="${sessionScope.talent.gender == 1}">
				<label> <input type="radio" name="gender" value="1"
					checked="checked"> 男
				</label>
				<label> <input type="radio" name="gender" value="2">
					女
				</label>
			</c:if>
			<c:if test="${sessionScope.talent.gender == 2}">
				<label> <input type="radio" name="gender" value="1">
					男
				</label>
				<label> <input type="radio" name="gender" value="2"
					checked="checked"> 女
				</label>
			</c:if>
		</div>
		<div class="checkbox">
			<label> <input type="checkbox" name="hobby" value="编程">编程
			</label> <label> <input type="checkbox" name="hobby" value="看书">看书
			</label> <label> <input type="checkbox" name="hobby" value="旅游">旅游
			</label> <label> <input type="checkbox" name="hobby" value="相亲">相亲
			</label>
		</div>
		<input type="submit" class="btn btn-primary" value="修改"> <input
			type="button" class="btn btn-default"
			onclick="goHome()"
			value="返回" />
	</form>

	<script>
		/**
		 *  checkbox回显
		 */
		var hobby = '${sessionScope.talent.hobby}'; // 旅游|看书
		if (hobby) {
			var hobbies = hobby.split('|');
			var allHobbies = document.getElementsByName('hobby');
			/*
			for (var i = 0; i < hobbies.length; i++) {
				for (var j = 0; j < allHobbies.length; j++) {
					if (hobbies[i] == allHobbies[j].value) {
						allHobbies[j].checked = true;
					}
				}
			}
			 */

			$(":checkbox").val(hobbies);
		}
		/**
		 * 表单验证
		 */
		function validate() {
			var result = true;
			var codeDOM = document.getElementById('code');
			var passwordDOM = document.getElementById('password');
			var rePasswordDOM = document.getElementById('rePassword');
			var nameDOM = document.getElementById('name');
			var phoneDOM = document.getElementById('phone');
			var emailDOM = document.getElementById('email');
			var ageDOM = document.getElementById('age');
			if (codeDOM.value == '') {
				document.getElementById('codeInfo').innerHTML = '<font color="red">账号不能为空!</font>';
				result = false;
			} else {
				document.getElementById('codeInfo').innerHTML = '';
			}
			if (passwordDOM.value == '') {
				document.getElementById('passwordInfo').innerHTML = '<font color="red">密码不能为空!</font>';
				result = false;
			} else {
				document.getElementById('passwordInfo').innerHTML = '';
			}
			if (passwordDOM.value != rePasswordDOM.value) {
				document.getElementById('rePasswordInfo').innerHTML = '<font color="red">密码输入错误!</font>';
				result = false;
			} else {
				document.getElementById('rePasswordInfo').innerHTML = '';
			}
			if (nameDOM.value == '') {
				document.getElementById('nameInfo').innerHTML = '<font color="red">名字不能为空!</font>';
				result = false;
			} else {
				document.getElementById('nameInfo').innerHTML = '';
			}
			if (phoneDOM.value == '') {
				document.getElementById('phoneInfo').innerHTML = '<font color="red">电话不能为空!</font>';
				result = false;
			} else {
				document.getElementById('phoneInfo').innerHTML = '';
			}
			if (emailDOM.value == '') {
				document.getElementById('emailInfo').innerHTML = '<font color="red">邮箱不能为空!</font>';
				result = false;
			} else {
				document.getElementById('emailInfo').innerHTML = '';
			}
			if (ageDOM.value == '') {
				document.getElementById('ageInfo').innerHTML = '<font color="red">年龄不能为空!</font>';
				result = false;
			} else {
				document.getElementById('ageInfo').innerHTML = '';
			}
			return result;
		}
	</script>
</body>
</html>